<script>
import { ref, onMounted, nextTick } from "vue";
import '@/fonts/icomoon.css'
import * as echarts from 'echarts'


export default {
    setup() {
        const points = ref([
            { value: 48, name: '告警' },
            { value: 140, name: '正常' }
        ])

        //设备状况
        const initPieCharts = () => {
            const charts = echarts.init(document.querySelector('.pie'))
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },

                color: ['#ed3f35', '#eacf19'],

                series: [
                    {
                        name: '点位统计',
                        type: 'pie',
                        radius: ['20%', '60%'],
                        center: ['40%', '40%'],
                        roseType: 'radius',
                        itemStyle: {
                            borderRadius: 5
                        },
                        data: points.value,

                        label: {
                            fontSize: 10,
                            color: 'inherit'
                        },
                        labelLine: {
                            length: 6,
                            length2: 8
                        }
                    }
                ]
            };
            // 配置项和数据给我们的实例化对象
            charts.setOption(option)
            // 浏览器缩放，图表等比例缩放
            window.addEventListener('resize', function () {
                charts.resize()
            })
        }

        // 网络状态
        const initGaugeChart = () => {
            const charts = echarts.init(document.querySelector('.gauge'));
            const option = {
                series: [
                    {
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        center: ['50%', '75%'],
                        radius: '90%',
                        min: 0,
                        max: 1,
                        splitNumber: 8,
                        axisLine: {
                            lineStyle: {
                                width: 6,
                                color: [
                                    [0.25, '#FF6E76'],
                                    [0.5, '#FDDD60'],
                                    [0.75, '#58D9F9'],
                                    [1, '#7CFFB2']
                                ]
                            }
                        },
                        pointer: {
                            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                            length: '12%',
                            width: 20,
                            offsetCenter: [0, '-60%'],
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            length: 12,
                            lineStyle: {
                                color: 'auto',
                                width: 2
                            }
                        },
                        splitLine: {
                            length: 20,
                            lineStyle: {
                                color: 'auto',
                                width: 5
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 20,
                            distance: -60,
                            rotate: 'tangential',
                            formatter: function (value) {
                                if (value === 0.875) {
                                    return 'A';
                                } else if (value === 0.625) {
                                    return 'B';
                                } else if (value === 0.375) {
                                    return 'C';
                                } else if (value === 0.125) {
                                    return 'D';
                                }
                                return '';
                            }
                        },
                        title: {
                            offsetCenter: [0, '-10%'],
                            fontSize: 18,
                            textStyle:{
                                color:'#fff'
                            }
                        },
                        detail: {
                            fontSize: 26,
                            offsetCenter: [0, '-35%'],
                            valueAnimation: true,
                            formatter: function (value) {
                                return Math.round(value * 100) + '';
                            },
                            color: 'inherit'
                        },
                        data: [
                            {
                                value: 0.7,
                                name: 'Grade Rating'
                            }
                        ]
                    }
                ]
            };
            charts.setOption(option);
            window.addEventListener('resize', function () {
                charts.resize();
            });
        };

        //地图模块
        const initMapCharts = () => {
            const charts = echarts.init(document.querySelector('.geo'))
            const option = {
                // backgroundColor: '#0E2152',
                geo: {/* geo:地理坐标系组件，地理坐标系组件用于地图的绘制。*/
                    roam: true, // 是否开启鼠标缩放和平移漫游
                    scaleLimit: { //滚轮缩放的极限控制
                        min: 1,
                        max: 6
                    },
                    //zoom: 1.05, // 地图放大
                    map: 'china',
                    label: { /* 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。 */
                        normal: {//通常状态下的样式
                            show: true,//是否显示标签(地图上每块地方的名字)
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        emphasis: {//鼠标放上去高亮的样式
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {//地图区域的多边形图形样式
                        normal: {
                            borderColor: '#5089EC',
                            borderWidth: 1,
                            areaColor: {//地图区域的颜色
                                colorStops: [
                                    { //0%处的颜色
                                        offset: 0,
                                        color: 'rgba(0,102,154,0)'
                                    },
                                    { //100%处的颜色 
                                        offset: 1,
                                        color: 'rgba(0,102,154,0.4)'
                                    },
                                ]
                            }
                        },
                        //鼠标放上去高亮的样式
                        emphasis: {
                            areaColor: '#2386AD',
                            borderWidth: 0
                        }
                    }
                },
                series: [
                    {//散点系列数据
                        type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
                        coordinateSystem: 'geo',//该系列使用的坐标系:地理坐标系
                        effectType: 'ripple',//特效类型,目前只支持涟漪特效'ripple'，意为"涟漪"
                        showEffectOn: 'render',//配置何时显示特效。可选'render'(绘制完成后显示特效)和'emphasis'(高亮的时候显示特效) 。
                        rippleEffect: {//涟漪特效相关配置
                            period: 10,// 动画的周期，秒数。
                            scale: 4,// 动画中波纹的最大缩放比例。
                            brushType: 'stroke'// 波纹的绘制方式，可选 'stroke' 和 'fill'。
                        },
                        zlevel: 1,//所有图形的zlevel值
                        data: mappoints.value
                    },
                    {//线条系列数据
                        type: 'lines',//路径图,用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
                        symbol: ['none', 'arrow'],//线两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。标记的图形：箭头，symbol的值还有这些:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin'，还可以引入图片
                        symbolSize: 10,//标记的大小
                        effect: {//线特效的配置
                            show: true,
                            period: 6,//特效动画的时间，单位s
                            trailLength: 0,//特效尾迹的长度。取值[0,1]值越大，尾迹越重
                            symbol: planePath.value,//特效图形的标记 可选'circle'等
                            symbolSize: 15//特效标记的大小
                        },
                        lineStyle: {//线条样式
                            normal: {
                                color: '#93E8F8',
                                width: 2.5,// 线条宽度
                                opacity: 0.6,// 尾迹线条透明度
                                curveness: 0.2// 尾迹线条曲直度
                            }
                        },
                        data: linesData.value
                    }
                ]
            }
            //地图注册，第一个参数的名字必须和option.geo.map一致
            echarts.registerMap('china', china)
            charts.setOption(option)
        }


        onMounted(() => {
            initPieCharts()
            initGaugeChart();
            // initMapCharts()  <-- 删除这一行
        })

    }
 
}



</script>

<template>
    <!-- 父容器大盒子 -->
    <div class="viewport">
        <div class="column">
            <!-- 概览模块 -->
            <div class="panel overview">
                <div class="inner">
                    <ul>
                        <li>
                            <h4>1</h4>
                            <span>
                                <i class="icon-dot" style="color: #006cff;"></i>
                                VPN数量
                            </span>
                        </li>
                        <li>
                            <h4>2</h4>
                            <span>
                                <i class="icon-dot" style="color:#6acca3"></i>
                                站点数量
                            </span>
                        </li>
                        <li>
                            <h4>3</h4>
                            <span>
                                <i class="icon-dot" style="color:#ed3f35"></i>
                                设备数量
                            </span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <h4>2190</h4>
                            <span>
                                <i class="icon-dot" style="color: #006cff;"></i>
                                设备总数
                            </span>
                        </li>
                        <li>
                            <h4>2001</h4>
                            <span>
                                <i class="icon-dot" style="color:#6acca3"></i>
                                运营设备
                            </span>
                        </li>
                        <li>
                            <h4>190</h4>
                            <span>
                                <i class="icon-dot" style="color:#ed3f35"></i>
                                季度新增
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 监控模块 -->
            <div class="panel monitor">
                <div class="inner">
                    <div class="tabs">
                        <a>异常设备列表</a>
                        <!-- <a href="javascript:;">异常设备监控</a> -->
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">故障时间</span>
                            <span class="col">设备地址</span>
                            <span class="col">异常代码</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">20180701</span>
                                    <span class="col">11北京市昌平西路金燕龙写字楼</span>
                                    <span class="col">1000001</span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                </div>
                                <div class="row">
                                    <span class="col">20190704</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000003</span>
                                </div>
                                <div class="row">
                                    <span class="col">20180701</span>
                                    <span class="col">北京市昌平区建路金燕龙写字楼</span>
                                    <span class="col">1000004</span>

                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000005</span>

                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000006</span>

                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建西路金燕龙写字楼</span>
                                    <span class="col">1000007</span>

                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000008</span>

                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000009</span>

                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000010</span>

                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000006</span>

                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建西路金燕龙写字楼</span>
                                    <span class="col">1000007</span>

                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000008</span>

                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000009</span>

                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000010</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        

        <div class="column">
          <!-- 运行状态模块（无特殊背景、无特殊标题条） -->
          <div class="panel overview">
            <div class="inner">
              <h3>运行状态</h3>
              <ul>
                <li>
                  <h4>183<span style="font-size:16px;color:#b6cfff;margin-left:2px;">day</span></h4>
                  <span>稳定运行天数</span>
                </li>
                <li>
                  <h4>1876</h4>
                  <span>总资源数</span>
                </li>
                <li>
                  <h4>51<span style="font-size:16px;color:#b6cfff;margin-left:2px;">TB</span></h4>
                  <span>存储资源</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- 运行状态下方图片 -->
          <div class="status-image-wrapper">
            <img src="@/assets/tuopu.png" alt="拓扑图" class="status-image" />
          </div>
        </div>

        <div class="column">
          <!-- 点位模块 -->
          <div class="panel point">
            <div class="inner">
              <h3>设备状态</h3>
              <div class="chart">
                <!-- <div class="pie"></div> -->
                <div class="pie" ref="pie"></div>
                <div class="data">
                  <div class="item">
                    <h4>48</h4>
                    <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    告警
                                </span>
                  </div>
                  <div class="item">
                    <h4>140</h4>
                    <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    正常
                                </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <!-- 网络模块 -->
        <div class="panel network">
          <div class="inner">
            <h3>网络状态</h3>
            <div class="chart">
              <div class="gauge" ref="gauge"></div>
            </div>
          </div>
        </div>

      </div>
        <!-- <div class="column">4</div> -->
    </div>
</template>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h4 {
    font-weight: 400;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #e33333;
}

li {
    list-style: none;
}

.viewport {
    background: url(@/assets/bg.jpg) no-repeat 0 0 / cover;
    display: flex;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    // padding: 88px 20px 0;
    min-height: 780px;
    // overflow: hidden;

    .column {
        flex: 2;
        // margin-right: 60px;
        margin: 0 20px;
        // background-color: pink;

        .panel {
            position: relative;
            border: 15px solid transparent;
            border-width: 51px 38px 20px 132px;
            border-image-source: url(@/assets/border.png);
            border-image-slice: 51 38 20 132;
            margin-bottom: 20px;

            h3 {
                font-size: 20px;
                color: #fff;
                font-weight: 400;
            }

            .inner {
                position: absolute;
                top: -51px;
                left: -132px;
                right: -38px;
                bottom: -20px;
                padding: 24px 36px;
                // background-color: red;

            }
        }
    }

    // .column:nth-child(2) {
    //     flex: 5
    // }
}

// 概览模块
.overview {
    height: 250px;

    ul {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        margin-top: 25px;

        h4 {
            font-size: 28px;
            color: #fff;
            margin: 0 0 8px 4.8px;
        }

        span {
            font-size: 16px;
            color: #4c9bfd;
        }
    }
}

// 监控模块
.monitor {
    height: 540px;

    .inner {
        // padding: 24px 0;
        display: flex;
        flex-direction: column;

        .tabs {
            a {
                color: #fff;
                font-size: 18px;
                // padding: 27px;
            }
        }

        .content {
            flex: 1;
            position: relative;
            display: none;

            .head {
                display: flex;
                justify-content: space-between;
                line-height: 1.05;
                background-color: rgba(255, 255, 255, 0.1);
                // padding: 12px 36px;
                margin-top: 25px;
                color: #68d8fe;
                font-size: 14px;
            }

            .marquee-view {
                // background-color: blue;
                // height: 550px;
                position: absolute;
                top: 70px;
                bottom: 0;
                width: 100%;
                overflow: hidden;

                .row {
                    display: flex;
                    justify-content: space-between;
                    line-height: 1.05;
                    font-size: 12px;
                    color: #61a8ff;
                    margin-top: 20px;
                    // padding: 12px 36px;

                }

                .row:hover {
                    background-color: rgba(255, 255, 255, 0.1);
                    color: #68d8fe;
                }
            }
        }
    }

    .col:first-child {
        width: 80px;
    }

    .col:nth-child(2) {
        width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .col:nth-child(3) {
        width: 80px;
    }
}

/* 通过CSS3动画滚动marquee */
.marquee-view .marquee {
    animation: move 15s linear infinite;
}

@keyframes move {
    0% {}

    100% {
        transform: translateY(-50%);
    }
}

/* 鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
    animation-play-state: paused;
}

//点位模块
.point {
    height: 250px;

    .chart {


        .pie {
            width: 312px;
            height: 240px;
            // margin-left: -10px;
            // background-color: pink;
        }

        .data {
            position: absolute;
            bottom: 0;
            right: 0;
            // margin-top: -10px;
            // background-color: blue;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 148px;
            padding: 36px 30px;
            // box-sizing: border-box;
            background-image: url(@/assets/rect.png);
            // background-size: cover;

            h4 {
                margin-bottom: 12px;
                font-size: 28px;
                color: #fff;
            }

            span {
                display: block;
                color: #4c9bfd;
                font-size: 16px;
            }
        }
    }
}

//网络模块
.network {
    height: 250px;

    .chart {
        display: flex;
        justify-content: center;


        .gauge {
            width: 312px;
            height: 240px;
            position: absolute;
            bottom: -25px;
        }
    }
}

.status-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 18px 0 0 0;
}
.status-image {
  width: 92%;
  max-width: 420px;
  border-radius: 10px;
  box-shadow: 0 2px 12px #001a3a33;
  object-fit: contain;
}

</style>